<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-scatter-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'scatter'
    }
  },

  computed: {
    yLabelPad () {
      if (this.ylabelPadding === '') {
        return ''
      } else {
        let name = this.ylabelPadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    yNamePad () {
      if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    xNamePad () {
      if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    option () {
      let yAxis = [{
        name: this.yName,
        nameTextStyle: {
          color: this.nameStyleColor,
          fontSize: this.nameStyleSize,
          padding: this.yNamePad.length > 0 ? this.yNamePad : null
        },
        min: this.yAxisMin === '' ? null : this.yAxisMin,
        splitNumber: this.yAxisSplitNumber === '' ? null : this.yAxisSplitNumber,
        max: this.yAxisMax === '' ? null : this.yAxisMax,
        type: this.yAxisType,
        show: this.showY,
        axisLine: {
          show: this.showYLine,
          lineStyle: {
            color: this.axisLineColor
          }
        },
        axisTick: {
          show: this.showYAxisTick
        },
        axisLabel: {
          show: true,
          formatter: this.yAxisType === 'value' ? '{value}' + this.yLabel : (this.useYAxisFun ? this.axisYFunction : '{value}'),
          rotate: this.yLabelRotate,
          interval: this.axisTickInterval === '' ? 'auto' : parseInt(this.axisTickInterval),
          padding: this.yLabelPad,
          textStyle: {
            fontSize: this.axisLabelFontSize,
            color: this.axisLabelColor
          }
        },
        splitLine: {
          show: this.showSplitLine,
          lineStyle: {
            color: [
              this.splitLineColor
            ]
          }
        }
      }]
      if (this.yAxisNumber === '2') {
        yAxis.push({
          name: this.yName1,
          nameTextStyle: {
            color: this.nameStyleColor,
            fontSize: this.nameStyleSize,
            padding: this.yNamePad1.length > 0 ? this.yNamePad1 : null
          },
          type: this.yAxisType,
          show: this.showY,
          axisLine: {
            show: this.showYLine,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisTick: {
            show: this.showYAxisTick
          },
          axisLabel: {
            show: true,
            formatter: this.yAxisType === 'value' ? '{value}' + this.yLabel1 : '{value}',
            rotate: this.yLabelRotate1,
            interval: this.axisTickInterval === '' ? 'auto' : parseInt(this.axisTickInterval),
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            }
          },
          splitLine: {
            show: this.showSplitLine,
            lineStyle: {
              color: [
                this.splitLineColor
              ]
            }
          }
        })
      }
      return {
        title: {
          show: this.showTitle,
          text: this.titleText,
          subtext: this.subtitleText
        },
        color: this.colors,
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          itemHeight: parseInt(this.legendHeight),
          itemWidth: parseInt(this.legendWidth),
          icon: this.icon,
          textStyle: {
            color: this.legendColor,
            fontSize: this.legendFontSize,
            padding: [3, 0, 0, 0]
          }
        },
        grid: {
          show: this.showGrid,
          left: this.gridLeft === '' ? 'auto' : this.gridLeft,
          top: this.gridTop === '' ? 'auto' : this.gridTop,
          right: this.gridRight === '' ? 'auto' : this.gridRight,
          bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
          borderWidth: 0,
          containLabel: true
        },
        radar: this.chartType === 'radar' ? {
          shape: this.shape === 'circle' ? 'circle' : 'polygon',
          radius: this.radiusLength,
          startAngle: this.startAngle,
          name: {
            show: this.showName,
            textStyle: {
              color: this.radarNameColor,
              backgroundColor: this.radarNameBgColor,
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          center: [this.radarX, this.radarY],
          triggerEvent: true,
          indicator: this.indicatorData
        } : null,
        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },
        dataZoom: this.showDataZoom ? {
          start: this.dataZoomStart,
          end: this.dataZoomEnd,
          type: this.dataZoomType,
          xAxisIndex: this.xAxisType === 'category' ? 0 : null,
          yAxisIndex: this.yAxisType === 'category' ? 0 : null
        } : null,
        visualMap: [{
          show: false,
          left: 'right',
          top: '10%',
          dimension: 2,
          min: this.visualMapMin,
          max: this.visualMapMax,
          itemWidth: 30,
          itemHeight: 120,
          calculable: true,
          text: ['圆形大小'],
          textStyle: {
            color: '#fff'
          },
          inRange: {
            symbolSize: [10, 70]
          },
          outOfRange: {
            symbolSize: [10, 70],
            color: ['rgba(255,255,255,.2)']
          },
          controller: {
            inRange: {
              color: ['#c23531']
            },
            outOfRange: {
              color: ['#444']
            }
          }
        }, {
          show: false,
          left: 'right',
          bottom: '5%',
          dimension: 3,
          min: this.visualMapMin1,
          max: this.visualMapMax1,
          itemHeight: 120,
          text: ['颜色深浅'],
          textStyle: {
            color: '#fff'
          },
          inRange: {
            colorLightness: [1, 0.5],
            // color: this.colors
          },
          outOfRange: {
            color: ['rgba(255,255,255,.2)']
          },
          controller: {
            inRange: {
              color: ['#c23531']
            },
            outOfRange: {
              color: ['#444']
            }
          }
        }],
        xAxis: this.showAxis ? {
          type: this.xAxisType,
          show: this.showX,
          name: this.xName,
          nameTextStyle: {
            color: this.nameStyleColor,
            fontSize: this.nameStyleSize,
            padding: this.xNamePad.length > 0 ? this.xNamePad : null
          },
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: this.showXLine,
            lineStyle: {
              color: this.axisLineColor
            }
          },
          axisTick: {
            show: this.showXAxisTick
          },
          axisLabel: {
            show: true,
            formatter: this.xAxisType === 'value' ? '{value}' + this.yLabel : (this.useXAxisFun ? this.axisFunction : '{value}'),
            rotate: this.xLabelRotate,
            interval: this.axisTickInterval === '' ? 'auto' : parseInt(this.axisTickInterval),
            textStyle: {
              fontSize: this.axisLabelFontSize,
              color: this.axisLabelColor
            }
          },
          splitLine: {
            show: this.showXSplitLine,
            lineStyle: {
              type: this.splitLineType,
              color: [
                this.splitLineColor
              ]
            }
          }
        } : null,
        yAxis: this.showAxis ? yAxis : null,
        // dataset: {
        //   source: this.data
        // },
        series: this.series
      }
    }
  },

  methods: {
    setSeries () {
      let vm = this
      let length = this.data.length

      this.series = []
      for (let i = 0; i <= length - 1; i++) {
        let series = {}
        series = {
          name: this.data[i].name,
          type: this.chartType,
          data: this.data[i].data
        }

        let cusSeries = {}
        if (this.useSeries && this.funcSeries !== '' && typeof this.funcSeries === 'function') {
          cusSeries = this.funcSeries(i, this)
        }
        Object.assign(series, {}, cusSeries)
        this.series.push(series)
      }
    },
    axisYFunction (value) {
      let label = ''
      if (this.funcYAxisLabel !== '' && typeof this.funcYAxisLabel === 'function') {
        let func = this.funcYAxisLabel
        label = func(value)
      } else {
        console.log(value)
      }
      return label
    }
  },

  watch: {
    useSeries () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
